<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择 活动区域">
        <el-option label="地址1" value="shanghai" />
        <el-option label="地址2" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="下拉菜单" prop="count">
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="下拉选择数字"
        :options="options"
      />
    </el-form-item>
    <el-form-item label="选择时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            aria-label="Pick a date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="ruleForm.date2"
            aria-label="Pick a time"
            placeholder="选择时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="选择地址" prop="location">
      <el-segmented v-model="ruleForm.location" :options="locationOptions" />
    </el-form-item>
    <el-form-item label="活动类型 复选" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="美食、线上餐厅" name="type">
          美食、线上餐厅
        </el-checkbox>
        <el-checkbox value="地推活动" name="type"> 地推活动 </el-checkbox>
        <el-checkbox value="线下主题活动" name="type">
          线下主题活动
        </el-checkbox>
        <el-checkbox value="单纯品牌曝光" name="type">
          单纯品牌曝光
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="单选" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="1">男</el-radio>
        <el-radio value="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script  setup>
import { reactive, ref } from "vue";
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  location: "",
  type: [],
  resource: "",
  desc: "",
});

const locationOptions = ["家", "公司", "学校"];

const rules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 3, max: 5, message: "字符为3到5个字符", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  location: [
    {
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "提示语",
      trigger: "change",
    },
  ],
  desc: [{ required: true, message: "提示语", trigger: "blur" }],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>
